<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ace Editor with Context Menu</title>
    <!-- 引入 Ace Editor -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.13/ace.js"></script>
    <!-- 引入 jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- 引入 jQuery Context Menu 插件 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.9.2/jquery.contextMenu.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.9.2/jquery.contextMenu.min.js"></script>
</head>
<body>
    <div id="editor" style="height: 500px; width: 100%;"></div>

    <script>
        // 初始化 Ace Editor
        var editor = ace.edit("editor");
        editor.setTheme("ace/theme/monokai");
        editor.session.setMode("ace/mode/javascript");

        // 创建右键菜单
        $.contextMenu({
            selector: '#editor',
            callback: function(key, options) {
                switch(key) {
                    case 'copy':
                        document.execCommand('copy');
                        break;
                    case 'clear':
                        editor.setValue('');
                        break;
                    case 'execute':
                        executeCode();
                        break;
                }
            },
            items: {
                "copy": {name: "Copy", icon: "copy"},
                "clear": {name: "Clear", icon: "delete"},
                "execute": {name: "Execute", icon: "exec"},
                "sep1": "---------",
                "quit": {name: "Quit", icon: function(){
                        return 'context-menu-icon context-menu-icon-quit';
                    }}
            }
        });

        // 处理执行代码逻辑
        function executeCode() {
            var code = editor.getValue();
            try {
                eval(code);
            } catch (e) {
                console.error("Execution error: ", e);
            }
        }

        // 防止 Ace Editor 默认的右键菜单弹出
        editor.container.addEventListener('contextmenu', function(event) {
            event.preventDefault();
        });
    </script>
</body>
</html>

